<template>
  <el-card class="box-card">
    <div class="clearfix">
      <div class="list">
        <img src="@/assets/images/workbench/userName.png"/>
        <span class="name">姓名：</span>
        <span class='value'>{{realname}}</span>
        <el-divider direction="vertical"></el-divider>
      </div>

      <div class="list">
        <img src="@/assets/images/workbench/depart.png"/>
        <span class="name">部门：</span>
        <span class='value'>{{baseDeptName}}</span>
        <span class='value' v-if='branchcodeName'>-{{branchcodeName}}</span>
        <el-divider direction="vertical"></el-divider>
      </div>

      <div class="list">
        <img src="@/assets/images/workbench/station.png"/>
        <span class="name">岗位/工位：</span>
        <span class='value'>{{userInfo.posts}}</span>
      </div>
    </div>

    <div @click="refresh" class="refresh" :class="isRefresh ? 'fresh' : ''">
      <i class="el-icon-refresh-left" style="font-size:30px;color:#000"></i>
    </div>
  </el-card>
</template>
<script>
  import {mapGetters } from "vuex";
export default {
  props:{
    userInfo:{
      type:Object,
      default:()=>{}
    }
  },
  dicts: ["PostManage"],
  data() {
    return {
      isRefresh:false,
      refreshTimer:null
    };
  },

  computed:{
    ...mapGetters([
      'realname',
      'branchcodeName',
      'baseDeptName'
    ]),
  },
  created(){
    if (this.refreshTimer) {
      clearTimeout(this.refreshTimer);
    }
  },

  methods:{
    refresh(){
      this.$parent.getUserInfo();
      // this.$parent.activeName  = "1";
      // this.$parent.updateKey ++
      this.$parent.abnormalKey ++
      this.$parent.taskKey ++
      this.$parent.attentionKey ++
      this.$parent.deviceKey ++
      this.$parent.nomalPadKey ++
      this.$parent.improvePadKey ++
      this.isRefresh = true;
      this.refreshTimer = setTimeout(()=>{
        this.isRefresh = false;
      },800)
    }
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 100%;
  ::v-deep.el-card__body{
    padding: 0.8rem 1.25rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .clearfix{
      display:flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      font-family: PingFangSC-Regular, PingFang SC;
      .list{
        display:flex;
        align-items: center;
        font-size: 14px;
        img{
          width: 16px;
          height: 16px
        }
        .el-divider--vertical{
          margin:1px 2rem;
          background-color: #CCCCCC;
        }
        .name{
         color: #7D8292;
         margin-left: 4px;
        }
        .value{
          color: #313131;
        }
      }
    }
    .el-form{
      .el-form-item{
        margin-bottom:0
      }
    }
    .refresh{
      cursor: pointer;
    }
    .fresh{
      animation:newframes 0.5s;
    }
    @keyframes newframes {
        0%{
          transform: rotate(0deg);
        }
        25%{
          transform: rotate(-60deg);
        }
        50%{
          transform: rotate(-120deg);
        }
        75%{
          transform: rotate(-60deg);
        }
        100%{
          transform: rotate(0deg);
        }
    }
  }
}

</style>
